<template>
  <section 
    id="stepper" 
    class="py-24 md:py-32"
    :style="{ 
      backgroundColor: bgColor,
      '--primary-color': primaryColor
    }"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 - 使用固定中文 -->
      <div class="text-center max-w-3xl mx-auto mb-16" v-if="showHeader">
        <span class="text-primary font-medium">服务流程</span>
        <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4">我们的合作步骤</h2>
        <p class="text-gray-600">简单四步，开启您的企业数字化转型之旅</p>
      </div>
      
      <div class="max-w-4xl mx-auto">
        <!-- 步骤指示器 -->
        <div class="flex justify-between items-center mb-12 relative" :class="{'flex-wrap': isResponsive}">
          <!-- 进度线 - 背景 -->
          <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 z-0"></div>
          <!-- 进度线 - 已完成部分 -->
          <div 
            class="absolute top-1/2 left-0 h-1 bg-primary -translate-y-1/2 z-10 transition-all duration-500"
            :style="{ width: progressPercentage + '%' }"
          ></div>
          
          <!-- 步骤点 -->
          <div 
            v-for="(step, index) in steps" 
            :key="index"
            class="relative z-20 flex flex-col items-center"
            :class="isResponsive ? 'mb-4 sm:mb-0' : ''"
          >
            <div 
              class="w-10 h-10 rounded-full flex items-center justify-center mb-2 cursor-pointer transition-all duration-300"
              :class="getStepIndicatorClasses(index)"
              @click="handleStepClick(index)"
            >
              <template v-if="step.icon">
                <i class="fa" :class="step.icon"></i>
              </template>
              <template v-else>
                {{ index + 1 }}
              </template>
            </div>
            <span class="text-sm font-medium" :class="isStepCompleted(index) ? 'text-primary' : ''">
              {{ step.title }}
            </span>
          </div>
        </div>
        
        <!-- 步骤内容 -->
        <div 
          class="rounded-xl p-8 transition-all duration-500"
          :class="getStepContentClasses()"
        >
          <h3 class="text-xl font-bold mb-4">{{ currentStep.title }}</h3>
          <p class="text-gray-600 mb-6" v-html="currentStep.description"></p>
          
          <!-- 步骤内容扩展区域 -->
          <div v-if="currentStep.content" class="mb-6" v-html="currentStep.content"></div>
          
          <!-- 导航按钮 - 使用固定中文文本 -->
          <div class="flex justify-end space-x-4">
            <button 
              class="px-6 py-2 border rounded-lg transition-all duration-300"
              :class="getPrevButtonClasses()"
              @click="prevStep"
              :disabled="currentStepIndex === 0"
            >
              <i class="fa fa-arrow-left mr-1" v-if="showNavigationIcons"></i>
              上一步
            </button>
            <button 
              class="px-6 py-2 rounded-lg transition-all duration-300"
              :class="getNextButtonClasses()"
              @click="nextStep"
              :disabled="currentStepIndex === steps.length - 1"
            >
              {{ currentStepIndex === steps.length - 1 ? '完成' : '下一步' }}
              <i class="fa fa-arrow-right ml-1" v-if="showNavigationIcons && currentStepIndex < steps.length - 1"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'StepperSection',
  // 低代码平台元数据 - 移除语言相关配置
  lowcode: {
    meta: {
      name: 'stepper-section',
      displayName: '步进器模块',
      description: '展示流程步骤或引导用户完成多步骤操作的组件',
      icon: 'fa-step-forward',
      category: '交互组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#ffffff'
          },
          {
            name: 'contentBgColor',
            label: '内容区背景色',
            type: 'color',
            defaultValue: '#f9fafb'
          },
          {
            name: 'showHeader',
            label: '显示标题区域',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '样式配置',
        fields: [
          {
            name: 'stepSize',
            label: '步骤点大小',
            type: 'number',
            min: 8,
            max: 24,
            defaultValue: 10
          },
          {
            name: 'showNavigationIcons',
            label: '显示导航图标',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'isResponsive',
            label: '响应式布局',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'contentBorderRadius',
            label: '内容区圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          }
        ]
      },
      {
        title: '步骤配置',
        fields: [
          {
            name: 'steps',
            label: '步骤列表',
            type: 'array',
            description: '步进器的步骤配置',
            defaultValue: [
              {
                title: '需求分析',
                description: '我们的专业顾问将与您深入沟通，了解您的业务需求、痛点和目标，进行全面的需求评估和分析，为您提供初步的解决方案建议。',
                icon: '',
                content: ''
              },
              {
                title: '方案设计',
                description: '基于需求分析结果，我们的技术团队将为您设计定制化的解决方案，包括系统架构、功能模块、实施计划和时间节点。',
                icon: '',
                content: ''
              },
              {
                title: '实施部署',
                description: '按照确定的解决方案，我们将进行系统开发、配置和部署工作，并进行严格的测试验证，确保系统稳定可靠。',
                icon: '',
                content: ''
              },
              {
                title: '运维支持',
                description: '系统上线后，我们将提供持续的技术支持和运维服务，包括问题修复、性能优化和系统升级，确保您的业务顺利运行。',
                icon: '',
                content: ''
              }
            ]
          },
          {
            name: 'initialStep',
            label: '初始步骤索引',
            type: 'number',
            min: 0,
            defaultValue: 0
          },
          {
            name: 'allowStepJump',
            label: '允许跳步',
            type: 'boolean',
            defaultValue: false
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'stepChange',
        label: '步骤改变',
        description: '当步骤发生变化时触发',
        parameters: [
          { name: 'currentIndex', type: 'number', description: '当前步骤索引' },
          { name: 'currentStep', type: 'object', description: '当前步骤信息' },
          { name: 'previousIndex', type: 'number', description: '上一步骤索引' }
        ]
      },
      {
        name: 'finish',
        label: '完成',
        description: '当点击最后一步的完成按钮时触发'
      },
      {
        name: 'stepClick',
        label: '步骤点击',
        description: '当点击步骤指示器时触发',
        parameters: [
          { name: 'index', type: 'number', description: '步骤索引' },
          { name: 'step', type: 'object', description: '步骤信息' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'nextStep',
        label: '下一步',
        description: '跳转到下一步'
      },
      {
        name: 'prevStep',
        label: '上一步',
        description: '返回到上一步'
      },
      {
        name: 'goToStep',
        label: '跳转到指定步骤',
        description: '直接跳转到指定索引的步骤',
        parameters: [
          { name: 'index', type: 'number', required: true, description: '目标步骤索引' }
        ]
      }
    ]
  },
  
  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    contentBgColor: {
      type: String,
      default: '#f9fafb'
    },
    
    children: {
      type: Array,
      default: () => []
    },
    // 样式配置
    stepSize: {
      type: Number,
      default: 10,
      validator: (value) => value >= 8 && value <= 24
    },
    showNavigationIcons: {
      type: Boolean,
      default: true
    },
    isResponsive: {
      type: Boolean,
      default: true
    },
    contentBorderRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    
    // 显示配置
    showHeader: {
      type: Boolean,
      default: true
    },
    
    // 步骤配置
    steps: {
      type: Array,
      default: () => [
        {
          title: '需求分析',
          description: '我们的专业顾问将与您深入沟通，了解您的业务需求、痛点和目标，进行全面的需求评估和分析，为您提供初步的解决方案建议。',
          icon: '',
          content: ''
        },
        {
          title: '方案设计',
          description: '基于需求分析结果，我们的技术团队将为您设计定制化的解决方案，包括系统架构、功能模块、实施计划和时间节点。',
          icon: '',
          content: ''
        },
        {
          title: '实施部署',
          description: '按照确定的解决方案，我们将进行系统开发、配置和部署工作，并进行严格的测试验证，确保系统稳定可靠。',
          icon: '',
          content: ''
        },
        {
          title: '运维支持',
          description: '系统上线后，我们将提供持续的技术支持和运维服务，包括问题修复、性能优化和系统升级，确保您的业务顺利运行。',
          icon: '',
          content: ''
        }
      ]
    },
    initialStep: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0
    },
    allowStepJump: {
      type: Boolean,
      default: false
    }
  },
  
  data() {
    return {
      currentStepIndex: 0
    };
  },
  
  computed: {
    // 当前步骤信息
    currentStep() {
      return this.steps[this.currentStepIndex] || this.steps[0];
    },
    
    // 进度百分比
    progressPercentage() {
      if (this.steps.length <= 1) return 100;
      return (this.currentStepIndex / (this.steps.length - 1)) * 100;
    }
  },
  
  watch: {
    // 当初始步骤变化时更新当前步骤
    initialStep: {
      immediate: true,
      handler(newVal) {
        if (newVal >= 0 && newVal < this.steps.length) {
          this.currentStepIndex = newVal;
        }
      }
    }
  },
  
  methods: {
    /**
     * 判断步骤是否已完成
     */
    isStepCompleted(index) {
      return index < this.currentStepIndex;
    },
    
    /**
     * 判断步骤是否为当前步骤
     */
    isCurrentStep(index) {
      return index === this.currentStepIndex;
    },
    
    /**
     * 获取步骤指示器的样式类
     */
    getStepIndicatorClasses(index) {
      const baseClasses = [];
      
      // 尺寸样式
      baseClasses.push(`w-${this.stepSize}`, `h-${this.stepSize}`);
      
      // 状态样式
      if (this.isStepCompleted(index)) {
        baseClasses.push('bg-primary', 'text-white');
      } else if (this.isCurrentStep(index)) {
        baseClasses.push('bg-primary', 'text-white', 'ring-4', 'ring-primary/20');
      } else {
        baseClasses.push('bg-gray-200', 'text-dark/60');
      }
      
      // 可点击状态
      if (!this.allowStepJump && !this.isStepCompleted(index) && !this.isCurrentStep(index)) {
        baseClasses.push('cursor-not-allowed', 'opacity-60');
      }
      
      return baseClasses.join(' ');
    },
    
    /**
     * 获取步骤内容区的样式类
     */
    getStepContentClasses() {
      return [
        `bg-[${this.contentBgColor}]`,
        `rounded-[${this.contentBorderRadius}px]`,
        'shadow-sm'
      ].join(' ');
    },
    
    /**
     * 获取上一步按钮的样式类
     */
    getPrevButtonClasses() {
      return [
        'border-gray-300',
        'text-dark/70',
        'hover:bg-gray-50',
        this.currentStepIndex === 0 ? 'opacity-50 cursor-not-allowed' : ''
      ].join(' ');
    },
    
    /**
     * 获取下一步/完成按钮的样式类
     */
    getNextButtonClasses() {
      const isLastStep = this.currentStepIndex === this.steps.length - 1;
      
      return [
        'bg-primary',
        'text-white',
        'hover:bg-primary/90',
        isLastStep ? 'hover:bg-green-600' : '',
        isLastStep ? 'bg-green-600' : '',
        this.currentStepIndex === this.steps.length - 1 ? '' : ''
      ].join(' ');
    },
    
    /**
     * 处理步骤点击
     */
    handleStepClick(index) {
      // 触发步骤点击事件
      this.$emit('stepClick', {
        index,
        step: this.steps[index]
      });
      
      // 如果不允许跳步，或者点击的是当前步骤，则不处理
      if (!this.allowStepJump || index === this.currentStepIndex) {
        return;
      }
      
      // 只允许跳转到已完成的步骤或下一步
      if (index < this.currentStepIndex || index === this.currentStepIndex + 1) {
        this.goToStep(index);
      }
    },
    
    /**
     * 下一步
     */
    nextStep() {
      if (this.currentStepIndex < this.steps.length - 1) {
        const previousIndex = this.currentStepIndex;
        this.currentStepIndex++;
        this.$emit('stepChange', {
          currentIndex: this.currentStepIndex,
          currentStep: this.currentStep,
          previousIndex
        });
      } else {
        // 如果是最后一步，触发完成事件
        this.$emit('finish');
      }
    },
    
    /**
     * 上一步
     */
    prevStep() {
      if (this.currentStepIndex > 0) {
        const previousIndex = this.currentStepIndex;
        this.currentStepIndex--;
        this.$emit('stepChange', {
          currentIndex: this.currentStepIndex,
          currentStep: this.currentStep,
          previousIndex
        });
      }
    },
    
    /**
     * 跳转到指定步骤
     */
    goToStep(index) {
      if (index >= 0 && index < this.steps.length && index !== this.currentStepIndex) {
        // 如果不允许跳步，只能前后一步一步移动
        if (!this.allowStepJump) {
          if (index === this.currentStepIndex + 1) {
            this.nextStep();
          } else if (index === this.currentStepIndex - 1) {
            this.prevStep();
          }
          return;
        }
        
        const previousIndex = this.currentStepIndex;
        this.currentStepIndex = index;
        this.$emit('stepChange', {
          currentIndex: this.currentStepIndex,
          currentStep: this.currentStep,
          previousIndex
        });
      }
    }
  }
};
</script>

<style scoped>
/* 已替换为Tailwind CSS样式 */
</style>
